<template>
  <el-dialog :title="title" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="800px">
    <div class="add-form">
      <el-form ref="form" :model="form" label-width="120px" :disabled="type === 'view'">
        <el-form-item label="后台单号">
          <span>{{ workOrderData.xmbzNo }}</span>
        </el-form-item>
        
        <el-form-item label="改款详情">
          <div v-if="workOrderData.beforExtJson">
            <div>
              <div>
                改前总价：<span class="c-red fw-bold">{{ Number(workOrderData.beforExtJson.price) / 100 }}元</span>
              </div>
              <span class="goods-item" v-for="(item, i) in workOrderData.beforExtJson.list" :key="i">
                {{ item.name }}
                <span>
                  （{{ item.originalPrice / 100 }}元）
                </span>
              </span>
            </div>

            <div>
              <div>
                改后总价：<span class="c-red fw-bold">{{ Number(workOrderData.afterExtJson.price) / 100 }}元</span>
              </div>
              <span class="goods-item" v-for="(item, i) in workOrderData.afterExtJson.list" :key="i">
                {{ item.name }}
                <span>
                  （{{ item.originalPrice / 100 }}元）
                </span>
              </span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="是否补差价">
          <span class="c-red">{{ workOrderData.fall == 1 ? '是' : '否' }}</span>
          <div>补差价原因/单号：<span class="c-red fw-bold">{{ workOrderData.reason }}</span></div>
        </el-form-item>
        <el-form-item label="处理状态">
          <XmSelect v-model="form.handleState" :options="statusList" plcaeholder="处理状态"></XmSelect>
        </el-form-item>
        <el-form-item label="审批结果/原因" prop="processingResults" :rules="[
          {required: form.handleState == 3, message: '如果不通过，请填写审批结果/原因', trigger: 'blur'}
        ]">
          <el-input type="textarea" class="w-300" v-model="form.processingResults" size="small" placeholder="审批结果"
            clearable></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button v-show="type === 'edit'" type="primary" @click="submit" :loading="loading">{{ loading ? '提交中...' :
        '提交'
      }}</el-button>
    </span>

  </el-dialog>
</template>

<script>
import { updateWorkGoodsSku } from '@/api/workorder'

const statusList = [{
  label: '通过',
  value: 2,
}, {
  label: '不通过',
  value: 3,
}]

export default {
  components: {
  },
  data() {
    return {
      statusList,
      visible: false,
      loading: false,
      type: 'edit',
      workOrderData: {},
      form: {
        handleState: 2,
        "processingResults": "",
      },
    }
  },
  computed: {
    title() {
      const typeMap = {
        'edit': '处理改款工单',
        'view': '改款工单详情',
      }
      return typeMap[this.type]
    }
  },
  methods: {
    show(data, type) {
      this.clearForm()
      this.workOrderData = data || {}
      this.visible = true
      this.type = type
    },
    clearForm() {
      this.form = {
        handleState: 2,
        processingResults: '',
      }
      this.$refs.form && this.$refs.form.clearValidate()
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          updateWorkGoodsSku(this.getParams()).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: `提交成功！`
              })
              this.visible = false
              this.$emit('submit')
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg
              })
            }
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    getParams() {
      const params = {
        id: this.workOrderData.id,
        orderId: this.workOrderData.orderId,
        handleState: this.form.handleState,
        processingResults: this.form.processingResults,
        source: this.workOrderData.source,
      }
      return params
    },
  },
}
</script>

<style lang="scss" scoped>
.goods-item {
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 5px;
  text-align: center;
  margin-right: 5px;
}
</style>
